<template>
  <div style="width: 1000px;margin: 0 auto;padding: 20px 0">
    <ul>
      <li v-for="item in items">
        <div v-if="item.subNav" class="item">
          <router-link :to='item.uri'>
            <h2>{{item.name}}</h2>
          </router-link>
          <div>
            <router-link :to='subItem.uri' v-for="(subItem,i) in item.subNav">
              {{subItem.name}}
            </router-link>
          </div>
        </div>
        <div v-else class="item">
          <router-link :to='item.uri'>
            <h2>{{item.name}}</h2>
          </router-link>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: []
      }
    },
    mounted() {
      this.navigation()
    },
    methods: {
      navigation() {
        this.$axios.get(this.$api.url + '/navigation/list').then((res) => {
          this.items = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  a {
    color: #000;
  }

  li {
    list-style: none;
    font-weight: bold;
  }

  .item {
    border: 1px solid #f3f3f3;
    margin: 10px 0;
  }

  .item h2 {
    background: #f3f3f3;
  }

  .item div {
    padding: 20px 10px;
    font-size: 15px;
  }

  .item div a {
    margin: 0 20px;
  }
</style>
